@extends('layouts/app')

@section('content')
    <div class="white-bg pb-10">
        <div class="search">
            <div class="search-input" style="width: 100%;">
                <input type="text" name="search" class="weui-input f30" placeholder="搜索">
                <svg class="icon f40" aria-hidden="true">
                    <use xlink:href="#icon-tubiao-7"></use>
                </svg>
            </div>
        </div>
    </div>

    <div class="reserve container">
        <div class="select-navbar-content">
            <ul class="select-navbar list-unstyled">
                <li class="f30" data-id="#tab1">
                    <span>附近</span>
                    <span class=" desk"></span>
                </li>
                <li class="f30" data-id="#tab2">
                    <span>销量</span>
                    <span class=" desk"></span>
                </li>
                <li class="f30" data-id="#tab3">
                    <span>好评</span>
                    <span class=" desk"></span>
                </li>
            </ul>
            {{--下拉模块--}}
            {{--<div class="content">--}}
                {{--<div id="s1" class="select-panel">--}}
                    {{--<div class="weui-cells weui-cells_radio">--}}
                        {{--<label class="weui-cell weui-check__label" for="x11">--}}
                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">附近</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" class="weui-check" name="radio1" id="x11">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                        {{--<label class="weui-cell weui-check__label" for="x12">--}}

                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">销量</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div id="s2" class="select-panel">--}}
                    {{--<div class="weui-cells weui-cells_radio">--}}
                        {{--<label class="weui-cell weui-check__label" for="x13">--}}
                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">分类1</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" class="weui-check" name="radio2" id="x13">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                        {{--<label class="weui-cell weui-check__label" for="x14">--}}

                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">分类2</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" name="radio2" class="weui-check" id="x14" checked="checked">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div id="s3" class="select-panel">--}}
                    {{--<div class="weui-cells weui-cells_radio">--}}
                        {{--<label class="weui-cell weui-check__label" for="x15">--}}
                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">排序1</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" value="1" class="weui-check" name="radio3" id="x15">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                        {{--<label class="weui-cell weui-check__label" for="x16">--}}

                            {{--<div class="weui-cell__bd">--}}
                                {{--<p class="text-left">排序2</p>--}}
                            {{--</div>--}}
                            {{--<div class="weui-cell__ft">--}}
                                {{--<input type="radio" value="2" name="radio3" class="weui-check" id="x16" checked="checked">--}}
                                {{--<span class="weui-icon-checked"></span>--}}
                            {{--</div>--}}
                        {{--</label>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            <ul class="reserve-list list-unstyled shops-list">

            </ul>
            {{--// 加载--}}
            <div style="padding-bottom: 10%;">
                <div class="weui-infinite-scroll hasdata">
                    <div class="infinite-preloader"></div>
                    <div class="weui-loadmore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                </div>
                <div class="weui-infinite-scroll nodata">
                    <div class="weui-loadmore weui-loadmore_line">
                        <span class="weui-loadmore__tips">没有更多了</span>
                    </div>
                </div>
            </div>
        </div>

        {{--<div class="weui-tab">--}}
            {{--<div class="weui-navbar select-nav">--}}
                {{--<a href='javascript:;' class="weui-navbar__item weui-bar__item--on white-bg f30">--}}
                    {{--<span>附近</span>--}}
                    {{--<svg class="icon f24 flipx" aria-hidden="true">--}}
                        {{--<use xlink:href="#icon--18"></use>--}}
                    {{--</svg>--}}
                {{--</a>--}}
                {{--<a href='javascript:;' class="weui-navbar__item white-bg f30">--}}
                    {{--分类--}}
                    {{--<svg class="icon f24 flipx" aria-hidden="true">--}}
                        {{--<use xlink:href="#icon--18"></use>--}}
                    {{--</svg>--}}
                {{--</a>--}}
                {{--<a href='javascript:;' class="weui-navbar__item white-bg f30">--}}
                    {{--综合排序--}}
                    {{--<svg class="icon f24 flipx" aria-hidden="true">--}}
                        {{--<use xlink:href="#icon--18"></use>--}}
                    {{--</svg>--}}
                {{--</a>--}}
            {{--</div>--}}
            {{--<div class="weui-tab__bd mt-5">--}}
                {{--<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">--}}
                    {{--<ul class="reserve-list list-unstyled shops-list">--}}

                    {{--</ul>--}}

                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
    </div>


    <script>
        var lat = '', // 纬度
            lng = ''; // 经度

        // 进来先获得地理位置
        var cityInfo = Storage.get('cityInfo');
        if (cityInfo.status) {
            cityInfo = JSON.parse(cityInfo.value);
            lat = cityInfo.lat;
            lng = cityInfo.lng;
            getData('distance', '#tab1');
        }

        var type = "distance";
        // 菜单点击事件
        $(".select-navbar li").click(function () {
            var id = $(this).attr("data-id");
            console.log("id", id);
            //置空容器
            $('.reserve-list').html('');

            // 附近商家
            if (id === '#tab1') {
                type = "distance";
                getData('distance');
            } else if (id === '#tab2') {
                // 销量商家
                type = "sales";
                getData('sales');
            } else if (id === '#tab3') {
                // 评分商家
                type = "score";
                getData('score');
            }

        });


        //        distance , sales, score
        // 获取销量商家数据
        function getData(type) {

            AjaxPage.init({
                url: '/api/reserve',    //路径
                cElement: document.body,    // 滚动容器
                element: '.shops-list',    // 列表容器
                type: 'listReserve',      //渲染类型
                total: 0,   // 总记录条数
                loading: !1, // 加载状态
                ajaxType: 'GET',
                arg: {      // 请求参数
                    page: 1,
                    num: 8,
                    type: type,
                    lat: lat,
                    lng: lng
                }
            });
        }





        // 搜索
        $("input[name='search']").on("input", function () {
            console.log("999");
            var str = $(this).val();
            //置空容器
            $('.reserve-list').html('');
            searchKey(str);
        });

        function searchKey (str) {
            AjaxPage.init({
                url: '/api/reserve',    //路径
                cElement: document.body,    // 滚动容器
                element: '.shops-list',    // 列表容器
                type: 'listReserve',      //渲染类型
                total: 0,   // 总记录条数
                loading: !1, // 加载状态
                ajaxType: 'GET',
                arg: {      // 请求参数
                    page: 1,
                    num: 8,
                    type: type,
                    lat: lat,
                    lng: lng,
                    s: str
                }
            });
        }
    </script>
@endsection

@extends('layouts/footer')
